All right, so in the last part, we created our little buttons widget here for our main menu with our
place settings and buttons, and now we're going to animate these so that when we hover over each one
of these buttons, the text on the buttons will shrink it down and it'll change color so that we can
see exactly where we are hovering and know that the game is responding to our input.
So let's let's just hop in and get started.
So let's grab our play button here, make a new animation.
I'll just call this hover one.
We'll select this animation track and I'll add this text to our new track.
So I'm going to hit the plus track button here and I'm going to add a color and opacity track and I'm
going to add a transform track.
So the color and opacity is pretty self-explanatory.
It's going to allow us to adjust what color the text is and how opaque it is.
And the transform allows us to adjust the rotation, scale, shear and translation of basically position
relative to its current position that it is.
So we're just going to be adjusting the scale, the opacity and the color.
So let's add our default keyframes here.
I'm just going to hit plus add a new key on each of these these tracks here.
And then I'm going to go forward to just go to like one point five or point one five.
Sorry.
And I'll zoom in here a little bit.
And now we can just adjust the values that we want to change.
So I'm going to go to the color and opacity first.
I'm going to bring the Alpha down to like seven.
You can see now the play button is a little bit more transparent and I'm going to adjust the color to
be kind of a teal blue.
So I'll bring red down to zero and with the green, uh, kind of like.
So I think that's pretty good.
I think that's pretty good just right there.
I think that's a nice color and a nice opacity.
And then I'll scroll down to the Transform track.
I will drop this down, I'll go to the scale and I'm just going to scale it down to maybe like point
nine.
Let's see how this looks.
It's a nice, subtle little you know, I think that looks pretty good once again, play with this stuff
yourself, try adjusting values at different speeds, different colors, different scales.
Do whatever the heck you want.
Get creative with it.
It's your game.
Make it cool.
But this is what I'm going to do here.
And that's that's it for this animation.
So now I just need to duplicate this animation a couple of times and change which text the animation
is being applied to.
So we're just going to go over to have one here, duplicate it, call this one Hopper to.
Grab it duplicated again and call this one Hubber three.
So now with Hova to selected, you could see it if we were to play this.
It's the exact same animation on the exact same text for all of these.
So what I'm just going to do is I'm going to go to the text block reference.
I'm going to right click on it.
And when you click on it, you can replace whatever item in your animation, in your track.
You can replace it with another object in in your widget.
So as long as you have it selected in this case, it's the settings text.
So I'm just going to select the settings text and then I go back down into my track for number two.
Right.
Click on this this reference here and go up to replace with text block.
And this is going to be whatever item, whatever thing in the widget I currently have selected.
In this case, it's the settings text.
So now when I play this, when I scrub through, you can see it is applying all of this animation to
the settings text instead of the playtest.
So now we're just going to do that one time with Hubber three.
I'm just going to select the quick button.
So like this.
And there we go.
Quick button, grab this replaced with text block one and now there we have it.
We now have our three hover animations.
So real quick, compile and save.
Just to make sure we don't lose any progress here and now we can go and program these so that they actually
do the, you know, hover animation.
So let's grab our playbook.
And first, we're going to scroll down to the events section in the details panel and uncovered.
We are going to an event and this event is going to trigger animation.
And then we're going to scroll back down again and add an event on Uncovered.
So this is going to play the animation back in reverse.
So let's grab our hover one animation in our Variables tab here.
You can see when you create a budget blueprint, you've got some custom variables in here, like your
buttons or your text blocks, as you know, variables in here as well as your animations.
So in this case, we won't have a one since that's the play button animation.
Just going to drag it in it, get hover one and then I'm going to drag off of here.
I'm going to type play animation.
I'm going to plug this into uncovered and the play mode is just going to be forward, the number of
loops, just one start time, zero playback speed one basically just going to be playing the animation
as we create a completely default exactly what we want next.
We're going to duplicate the play animation node and connect it up to on Uncovered.
I'm going to connect the hover one reference because we're playing the exact same animation except in
reverse this time.
So what we're going to do is go down to our play mode and change this dropdown from forward to reverse,
just like so compile save.
And if we play this, you will see when we hover over our play button, it plays the animation forward
on uncovered, it plays the animation in reverse.
So now we just got to do that for our other two buttons and we will have something super freaking amazing.
So let's go to the settings button, scroll down, add an event on hovered at an event on on hover,
just like we did before.
But these down here, and then what I can do is I can just duplicate this code here, copy paste, plug
it in here, and then simply replace the hover one reference with a reference to hover to get this variable,
plug it into the animation for both of these, compile save.
When we play this, you can now see play plays.
It's hover animation settings please.
Its hover animation.
It's fantastic, and now we just have one more of these to do our quick button scroll down to on Harvard
and to on on Harvard.
The space these nicely.
Duplicate our code.
Plug these in.
And just a quick tip here, in case you weren't aware of this, if you drag a variable type on top of
another variable, it will replace that reference automatically.
So if I grab Hover three here and I drag it on to hover, too, you can see we've got this tooltip here.
This is change node to read Hober three, and now it's just automatically replace that.
I can switch it up one or two rather than deleting this node and putting in a new one.
Either way works.
Just figured I'd share that in case you didn't know about it.
All right.
So now once again, we can play.
We have all of our glorious animations.
This is fantastic.
This is looking great.
I'm quite liking it so far.
And in the next hour, I think we're going to get into programming the actual functionality between,
you know, some of these buttons.
So that is it for this part.
And I will see you in the next video.